<template>
  <div>
    <div v-if="show == 0" class="mlt">
      <div class="as">
        <div class="bb">预约诊所:</div>
        <div class="ccc">{{ dataList.mec_name }}</div>
      </div>
      <div class="as">
        <div class="bb">用户姓名:</div>
        <div class="ccc">{{ dataList.cus_name }}</div>
      </div>

      <!-- <div class="as">
      <div class="bb">预约项目:</div>
      <div class="ccc">青岛-敦化路诊所</div>
    </div>
    <div class="as">
      <div class="bb">科室套餐:</div>
      <div class="ccc">青岛-敦化路诊所</div>
    </div> -->
      <div class="as">
        <div class="bb">订单费用 :</div>
        <div class="ccc">{{ dataList.ord_amount }}￥</div>
      </div>
      <div class="as">
        <div class="bb">预约医生:</div>
        <div class="ccc">{{ dataList.real_name }}</div>
      </div>

      <div class="as">
        <div class="bb">预约状态:</div>
        <div class="ccc">{{ dataList.ord_status }}</div>
      </div>
      <el-table :data="dataList.item">
        <el-table-column label="商品" prop="goods_name" />
        <el-table-column label="数量" prop="item_qty" />
        <el-table-column label="费用" prop="item_price" />
        <el-table-column label="小计" prop="total_amount" />
      </el-table>
      <div
        style="
          text-align: right;
          margin-right: 10%;
          margin-top: 20px;
          font-size: 14px;
          color: red;
        "
      >
        合计：{{ dataList.ord_amount }}￥
      </div>
      <div>
        <el-button
          v-if="dataList.ord_status_code == 'wait'"
          style="width: 98%; margin-top: 10px; height: 50px; font-size: 20px"
          type="primary"
          @click="goPay"
        >
          微信支付
        </el-button>
        <el-button
          v-else
          style="width: 98%; margin-top: 10px; height: 50px; font-size: 20px"
          type="primary"
        >
          {{ dataList.ord_status }}
        </el-button>
      </div>
    </div>
    <div v-if="show == 1">
      <SeeReceive @showMain="showMain" />
    </div>
  </div>
</template>

<script>
  // import wx from 'weixin-jsapi'
  import { wxPay, payOrder, wxpaystatus } from '@/api/pay'

  export default {
    components: {
      SeeReceive: () => import('./components/paySuccess.vue'),
    },
    data() {
      return {
        dataList: {},
        app: {},
        show: 0,
      }
    },
    watch: {},
    mounted() {
      const data = {
        order_sn: this.$route.query.order_sn,
      }
      payOrder(data).then((e) => {
        this.dataList = e.data.order
        this.app = e.data.app
      })
    },
    methods: {
      showMain(e) {
        const data = {
          order_sn: this.$route.query.order_sn,
        }
        payOrder(data).then((e) => {
          this.dataList = e.data.order
          this.app = e.data.app
        })
        this.show = e
      },
      goPay() {
        this.$route.query.type = 'h5'
        wxPay(this.$route.query).then((data) => {
          // console.log(data)
          function onBridgeReady() {
            window.WeixinJSBridge.invoke(
              'getBrandWCPayRequest',
              {
                appId: data.appid,
                timeStamp: String(data.timestamp), // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                nonceStr: data.nonce, // 支付签名随机串，不长于 32
                package: data.prepay_str, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign: data.paySign, // 支付签名
              },
              function (res) {
                if (res.err_msg == 'get_brand_wcpay_request:ok') {
                  const data = {
                    order_sn: this.$route.query.order_sn,
                  }
                  wxpaystatus(data).then((e) => {
                    if (e.data.order_status) {
                      this.show = 1
                    }
                  })
                  // 使用以上方式判断前端返回,微信团队郑重提示：
                  //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                }
              }
            )
          }
          if (typeof WeixinJSBridge == 'undefined') {
            if (document.addEventListener) {
              document.addEventListener(
                'WeixinJSBridgeReady',
                onBridgeReady,
                false
              )
            } else if (document.attachEvent) {
              document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
              document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
            }
          } else {
            onBridgeReady()
          }
        })
      },

      // wx,
    },
  }
</script>

<style>
  .as {
    width: 100%;
    height: 14.93333333vw;
    line-height: 14.93333333vw;
    border-bottom: 1px solid #d6d6d6;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .bb {
    color: #848484;
    padding-top: 0 !important;
  }
  .ccc {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: 2.66666667vw;
    overflow: hidden;
  }
</style>
